<template>
	<view class="pageContainer" :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>主题色</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>color</view>
					<view>String, Array</view>
					<view>无</view>
					<view>自定义主题色。可按进度值设置不同进度色</view>
				</view>
				<view class="appendix">
					格式：[{value:"颜色值", rate:进度值}]
				</view>
			</view>
			<view class="tr">
				<view>textColor</view>
				<view>String</view>
				<view>无</view>
				<view>固定文字色</view>
			</view>
			<view class="tr">
				<view>size</view>
				<view>String</view>
				<view>md</view>
				<view>预定尺寸</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>String, Number</view>
				<view>circle</view>
				<view>圆角，可选circle、square，或填入带单位数值</view>
			</view>
			<view class="tr">
				<view>height</view>
				<view>String, Number</view>
				<view>无</view>
				<view>自定义进度条高度，需带单位</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view>String, Number</view>
				<view>0</view>
				<view>进度值，必须是有效数字</view>
			</view>
			<view class="tr">
				<view>decimals</view>
				<view>Number</view>
				<view>0</view>
				<view>固定小数位</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>tips</view>
					<view>Boolean,Array</view>
					<view>true</view>
					<view>显示标签。false关闭，true显示为进度值，可按进度值定义显示值或图标</view>
				</view>
				<view class="appendix">
					<view>格式：{{"[{"}}</view>
					<view class="indent2">value: 显示值</view>
					<view class="indent2">rate: 进度值</view>
					<view class="indent2">icon: 图标名，优先显示</view>
					<view class="indent2">plain: 镂空(图标类型有效，非图标固定镂空)</view>
					<view class="indent2">type: 主题色</view>
					<view class="indent2">color: 自定义颜色</view>
					<view>{{"}]"}}</view>
				</view>
			</view>
			<view class="tr">
				<view>tipsInside</view>
				<view>Boolean, String</view>
				<view>false</view>
				<view>标签类型设为内部。true显示为进度条+标签头，plain显示为进度条+内嵌内容，进度条预设size变为加粗</view>
			</view>
			<view class="tr">
				<view>tipsColorFollow</view>
				<view>Boolean</view>
				<view>false</view>
				<view>标签跟随进度条主题色，标签类型为外部时有效。图标类型默认跟随</view>
			</view>
			<view class="tr">
				<view>tipsRadius</view>
				<view>String</view>
				<view>0.7em</view>
				<view>标签圆角，tipsInside为true时有效。标签头高1.4em</view>
			</view>
			<view class="tr">
				<view>bgColor</view>
				<view>String</view>
				<view>#eee</view>
				<view>进度条背景色，为空时将使用default主题色</view>
			</view>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{`&lt;vi-progress>按钮文字或带图标&lt;/vi-progress>`}}
			</view>
			<view class="py-sm">
				<vi-progress value="10"></vi-progress>
			</view>
			<view class="py-sm">
				<vi-button size="sm" type="default" inline class="mr-e1" @click="add">加</vi-button>
				<vi-button size="sm" type="default" inline @click="reduce">减</vi-button>
				<view>自定义进度颜色</view>
				<vi-progress :value="value" :color="colors"></vi-progress>
			</view>
			<view class="py-sm">
				<view>自定义标签</view>
				<vi-progress :value="value" :color="colors" :tips="tips"></vi-progress>
			</view>
			<view class="py-sm">
				<view>内部标签</view>
				<vi-progress :value="value" :color="colors" :tips="tips" tipsInside></vi-progress>
			</view>
			<view class="py-sm">
				<view>内嵌内容</view>
				<vi-progress :value="value" :color="colors" :tips="tips" tipsInside="plain"></vi-progress>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:20,
				colors:[
					{rate:0, color:"#acb8b8"},
					{rate:20, color:"#19b5ff"},
					{rate:30, color:"#0135e0"},
					{rate:40, color:"#9b13b5"},
					{rate:50, color:"#da0b5b"},
					{rate:60, color:"#e87f23"},
					{rate:70, color:"#f7ca17"},
					{rate:80, color:"#2dcc70"},
					{rate:90, color:"#00d5ce"},
				],
				tips:[
					{rate:0, value:"开始"},
					{rate:20, icon:"icon-clock"},
					{rate:40, icon:"icon-rotate-right", type:"second"},
					{rate:60, value:"过半"},
					{rate:80, value:"快结束", color:"#f00"},
					{rate:100, color:"#0f0"},
				]
			}
		},
		methods: {
			add(){
				this.value +=5;
				if(this.value>100){
					this.value =100
				}
			},
			reduce(){
				this.value -=5;
				if(this.value<0){
					this.value =0
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
